interface PageContainerAggregationCountyProps {}
import { ActionType, PageContainer, ProCard } from '@ant-design/pro-components';
import { useAccess } from '@umijs/max';
import { Segmented, Spin } from 'antd';
import RcResizeObserver from 'rc-resize-observer';
import React, { useEffect, useRef, useState } from 'react';

import { getCountyAnalysis } from '@/services/api/api-county';
import TableActive from '../TableCounty/TableActive';
import TableSubmit from '../TableCounty/TableSubmit';
import TableTopic from '../TableCounty/TableTopic';
import style from './PageContainerAggregationCounty.less';

const PageContainerAggregationCounty: React.FC<PageContainerAggregationCountyProps> = (props) => {
  const access = useAccess();
  const [tab, setTab] = useState('tab2');
  const [countyKey, setCountyKey] = useState('1');
  const items = [
    {
      label: '区县列表',
      key: 'grp',
      type: 'group',
      children: [
        { label: '高新区', key: '1' },
        { label: '璧山区', key: '2' },
        { label: '綦江区', key: '3' },
      ],
    },
  ];
  const [visible, setVisibleState] = useState<string>('table');
  const [totalData, setTotalDataState] = useState<CountyData.Analysis>();
  const [loading, setLoadingState] = useState(true);
  const [responsive, setResponsive] = useState(false);

  const [visibleData, setVisibleDataState] = useState<DetailsType>();

  const onDetails = (id: string, name: string) => {
    setVisibleState('details');
    setVisibleDataState({ id, name });
  };
  const actionRef = useRef<ActionType>();

  const loadAnalysisData = async (key:string) => {
    try {
      const response = await getCountyAnalysis({ countyKey: key });
      if (response.code === 0) {
        console.log(response.data);
        setTotalDataState(response.data);
      }
      setLoadingState(false);
    } catch (error) {
      console.log(error);
      setLoadingState(false);
    }
  };
  useEffect(() => {
    loadAnalysisData('1');
  }, []);

  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(offset) => {
        setResponsive(offset.width < 596);
      }}
    >
      <PageContainer
        header={{
          title: (
            <div>
              <span
                style={{
                  marginInlineEnd: '12px',
                  color: 'rgba(0, 0, 0, 0.88)',
                  fontWeight: 600,
                  fontSize: 20,
                  height: 48,
                  paddingRight: 35,
                }}
                title="区县线索"
              >
                区县线索
              </span>
              <Segmented
                size="large"
                options={[
                  { label: '高新区', value: '1', disabled: false },
                  { label: '璧山区', value: '2', disabled: false },
                  { label: '綦江区', value: '3', disabled: true },
                ]}
                onChange={(value) => {
                  setLoadingState(true);
                  setCountyKey(value);
                  loadAnalysisData(value);
                }}
              />
            </div>
          ),
          breadcrumb: {
            items: [],
          },
          style: {
            paddingBlockEnd: 0,
          },
        }}
      >
        <Spin spinning={loading} size="large">
          <ProCard
            headerBordered={false}
            bordered={false}
            direction={responsive ? 'column' : 'row'}
          >
            <ProCard
              headerBordered={false}
              bordered={false}
              className={style.topic}
              split={responsive ? 'horizontal' : 'vertical'}
              style={{ padding: '10px 40px', width: '95%' }}
            >
              <h3>选题计划</h3>
              <h2 style={{ color: '#467BE3' }}>{totalData?.countTopic} </h2>
            </ProCard>
            <ProCard
              bordered={false}
              className={style.submit}
              split={responsive ? 'horizontal' : 'vertical'}
              style={{ padding: '10px 40px', width: '95%' }}
            >
              <h3>上报资源</h3>
              <h2 style={{ color: '#467BE3' }}>{totalData?.countSubmit}</h2>
            </ProCard>
            <ProCard
              bordered={false}
              className={style.active}
              split={responsive ? 'horizontal' : 'vertical'}
              style={{ padding: '10px 40px', width: '95%' }}
            >
              <h3>主动报送</h3>
              <h2 style={{ color: '#467BE3' }}>{totalData?.countActive}</h2>
            </ProCard>
          </ProCard>
        </Spin>
        <ProCard
          style={{ paddingLeft: 15 }}
          tabs={{
            tabPosition: 'top',
            activeKey: tab,
            items: [
              {
                label: `选题计划`,
                key: 'tab1',
                children: <TableTopic onDetails={onDetails} countyKey={countyKey}></TableTopic>,
              },
              {
                label: `上报资源`,
                key: 'tab2',
                children: <TableSubmit onDetails={onDetails} countyKey={countyKey}></TableSubmit>,
              },
              {
                label: `主动报送`,
                key: 'tab3',
                children: <TableActive countyKey={countyKey} actionRef={actionRef}></TableActive>,
              },
            ],
            onChange: (key) => {
              setTab(key);
            },
          }}
        />
      </PageContainer>
    </RcResizeObserver>
  );
};

export default PageContainerAggregationCounty;
